<template>
	<view class="detail">
		<view class="dataList">
			<view class="technicianList flex">
				<image class="img" :src=storeDetail.images alt="" />
				<view class="flex1">
					<view class="flexjsbac technicianName">
						<text>{{ storeDetail.storeName }}</text>
						<!-- <text>{{ storeDetail.id }}</text> -->
						<!-- <view class="flex" style="color: #666666;">
							<u-icon name="map-fill" color="#B1B1B1" size="20"></u-icon>
							2.4km
						</view> -->
					</view>
					<view class="flexjsbac list_con">
						<view class="flexJcac">
							<u-icon name="order" color="#666666" size="22"></u-icon>
							{{ storeDetail.openingTime }}~{{ storeDetail.closingTime }}
						</view>
						<text style="color:#C27E15;height: 35rpx;margin: 0;" class="btn" @click="clickStoreDetail">详情</text>
					</view>
					<view class="flexjsbac">
						<view class="flexJcac">
							<u-icon name="clock" color="#666666" size="20"></u-icon>
							{{ storeDetail.provinceString || '' }}{{storeDetail.cityString || '' }}{{storeDetail.countyString || '' }}{{storeDetail.distance || '' }}{{storeDetail.detail || '' }}
						</view>
							<u-icon name="phone-fill" color="#51C728" size="30" @click="call(storeDetail)"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default{
		name: 'StoreDetail',
		data() {
			return{
				baseImgUrl: pageConfig.baseImgUrl
			}
		},
		props:{
			storeDetail: {
				type: Object,
				default: {}
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			call(storeDetail) {
				uni.makePhoneCall({
					phoneNumber: storeDetail.phoneNumber
				})
			},
			getInfo(){
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude)
						console.log('当前位置的纬度：' + res.latitude)
					}
				})
			},
			clickStoreDetail() {
				const storeAddress =  this.storeDetail.provinceString + this.storeDetail.cityString + this.storeDetail.countyString + this.storeDetail.detail
        const transferData = {
          storeId: this.storeDetail.id,
          storeName: this.storeDetail.storeName,
          regionId: this.storeDetail.regionId,
          regionName: this.storeDetail.regionName,
          storeAddress,
          openingTime: this.storeDetail.openingTime,
          closingTime: this.storeDetail.closingTime
        }
        const params = encodeURIComponent(JSON.stringify(transferData))
        uni.navigateTo({
          url: `/subPages/home/shopDetail?transferData=${params}`
        })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		margin: 30rpx;
		.dataList{
			margin-bottom: 30rpx;
			background: #fff;
			border-radius:17rpx;
			.bottom_con{
				border-top: 1px solid #E6E6E6;
				height: 122rpx;
				padding: 24rpx;
			}
			.dataList_title{
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid #E6E6E6;
				padding: 24rpx;
			}
			.technicianList{
				padding: 24rpx;
				.technicianName{
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 43.44rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
				}
				.list_con{
					margin: 10rpx 0;
				}
				.img{
					width: 128rpx;
					height: 128rpx;
					margin-right: 24rpx;
					border-radius: 50%;
				}
			}
		}
	}
	
</style>